<template>
  <view :style="colorStyle">
    <view class="safe-area-inset-bottom" style="height: 120rpx"> </view>
    <view>
      <view class="tabbarModule flex aitems jcenter">
        <view
          class="tabbarOptions flex aitems jcenter"
          v-for="(items, indexs, keys) in data"
          :key="keys"
          @click="tabbarChange(items)"
        >
          <image
            :src="items.icon"
            class="icon"
            :style="{
              background: `${indexs == activeIndex ? 'var(--view-theme)' : ''}`,
            }"
          ></image>
          <view
            class="tabbar name"
            :style="{
              color: `${indexs == activeIndex ? 'var(--view-theme)' : ''}`,
            }"
          >
            {{ items.name }}
          </view>
        </view>
        <!-- @click="makePhoneCall" -->
        <view
          class="tabbarOptions flex aitems jcenter"
          style="position: relative"
        >
          <button class="avatar-wrapper" open-type="contact"></button>
          <image :src="require('@/static/seller/4.png')" class="icon2"></image>
          <view class="tabbar name"> 联系客服 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import colors from "@/mixins/color";
import { getStorage, setStorage } from "@/utils/storage.js";
import { go } from "@/utils/wxAPI";
export default {
  mixins: [colors],
  props: {
    activeIndex: {
      type: Number,
      default: 0,
    },
    sellerId: {
      default: "",
    },
    user: {
      default: {},
    },
  },
  name: "tabbar",
  data() {
    return {
      data: [
        {
          name: "首页",
          icon: require("@/static/seller/1.png"),
          path: `/pages/seller/info`,
        },
        {
          name: "分类",
          icon: require("@/static/seller/2.png"),
          path: `/pages/seller/cate`,
        },
        {
          name: "领券",
          icon: require("@/static/seller/3.png"),
          path: `/pages/seller/coupon`,
        },
        // {
        //   name: "联系客服",
        //   icon: require("@/static/seller/4.png"),
        //   path: "",
        // },
      ],
    };
  },
  onload() {},
  mounted() {
    // console.log(this.activeIndex)
    // setTimeout(() => {
    // 	console.log("-----------CustomTabBar----------");
    // 	this.data = getStorage("customData");
    // 	console.log(this.data);
    // }, 500);
  },
  methods: {
    tabbarChange(item) {
      if (item.path) {
        uni.reLaunch({
          url: `${item.path}?id=${this.sellerId}`,
        });
      }
    },
    makePhoneCall() {
      if (this.user.extVO.serveType == "1") {
        uni.makePhoneCall({
          phoneNumber: String(this.user.extVO.serveMobile),
        });
      } else {
        // #ifdef H5
        window.location.href = this.user.extVO.serveUrl;
        // #endif
        // #ifdef MP-WEIXIN
        setStorage("webview", this.user.extVO.serveUrl);
        go(`/pages/webview/webview`);
        // #endif
      }
    },
  },
};
</script>

<style scoped lang="scss">
.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabbarModule {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  z-index: 99;
  bottom: 0;
  width: 100%;
  background: #fff;

  .tabbarOptions {
    height: 100rpx;
    flex: 1;
    margin: 0 auto;
    text-align: center;
    flex-direction: column;
  }

  .icon {
    width: 52rpx;
    height: 52rpx;
    margin: 0 auto;
    background: #858585;
    display: flex;
    // position: relative;
    // left: -1px;
    // top: -1px;
  }

  .icon2 {
    width: 52rpx;
    height: 52rpx;
    margin: 0 auto;
  }

  .name {
    font-size: 24rpx;
    margin-top: 4rpx;
  }
}
</style>
